<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="邵铭">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
        }
        
        .box {
            margin: 0 auto;
            border: 1px solid #aaa;
            width: 200px;
            overflow: hidden;
        }
        
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            padding-left: 10px;
        }
        
        li {
            position: relative;
            width: 180px;
            margin-top: 10px;
        }
        
        .first {
            width: 180px;
            height: 150px;
        }
        
        .second {
            position: absolute;
            top: 0;
            left: 190px;
            width: 180px;
            height: 150px;
        }
        
        section {
            width: 180px;
            height: 25px;
            background-color: #DF6D5B;
            line-height: 25px;
            color: white;
            text-align: center;
            position: absolute;
            top: 125px;
        }
        
        span {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }
        
        h2 {
            display: inline-block;
            background-color: #ddd;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 0;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>专辑推荐</h2>
        <ul>
            <li>
                <span class="first">
                    <img src="./img/1_1.jpg" alt="">
                     <section class="left">
                         COCOON/可可尼
                        </section>
                 </span>
                <span class="second">
                    <img src="./img/1_2.jpg" alt="">
                  <section  class="right">几何为网-极致绚烂</section>
                </span>

            </li>
            <li>
                <span><img src="./img/2_1.jpg" alt="">
        <section class="left"  style="background-color: #0C414F">
            COCOON/可可尼
        </section></span>
                <span class="second"><img src="./img/2_2.jpg" alt="">
        <section class="right" style="background-color: #0C414F">
            几何为网-极致绚烂
        </section></span>

            </li>
            <li>
                <span><img src="./img/3_1.jpg" alt="">
        <section class="left" style="background-color: #186CAD">
            COCOON/可可尼
        </section></span>
                <span class="second"><img src="./img/3_2.jpg" alt="">
        <section class="right" style="background-color: #186CAD">
            几何为网-极致绚烂
        </section></span>
            </li>
        </ul>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('li').hover(function () {
        $(this).stop().animate({ left: -190 }, 200)
        $(this).find('.left').stop().animate({ top: 155 }, 400)
        $(this).find('.right').stop().animate({ top: 125 }, 400)
    }, function () {
        $(this).stop().animate({ left: 0 }, 200)
        $(this).find('.left').stop().animate({ top: 125 }, 400)
        $(this).find('.right').stop().animate({ top: 155 }, 400)

    })


</script>